<template>
	<view class="container">
	    <view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{userName}}</view>
		</view>
		<view class="list-header bg-white">
	        <view class="solid-bottom">
	            <view class="cu-bar search">
	                <view class="search-form round">
	                    <text class="cuIcon-search"></text>
	                    <input type="text" placeholder="搜索设备序列号" v-model="keyword"></input>
	                </view>
	                <view class="action">
	                    <button class="cu-btn bg-orange shadow-blur round" @click="btnSearch()">搜索</button>
	                </view>
	            </view>
	        </view>
	    </view>
		<p class="bg-white padding-left padding-top-xs text-sm text-gray">左右滑动选择业务类型</p>
		<scroll-view scroll-x="true" class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex?'text-orange cur':''"
					v-for="(item,index) in tabListData" :key="index" @click="bindTabChange(index)">
				{{item.businessTypeName}}
				</view>
			</view>
		</scroll-view>
		<view class="list-body">
			<scroll-view scroll-y @scrolltolower="scrollTolower">
			<checkbox-group class="block" @change="btnCheckboxChange">
			<view class="cu-list menu card-menu margin-top-sm">
				<view class="cu-item" v-for="(item,index) in listData" :key="index">
					<view class="content padding-tb-sm">
						<view>{{item.deviceSn}}</view>
						<view class="text-gray text-sm"><text class="cuIcon-infofill margin-right-xs"></text>{{item.deviceTypeName}}</view>
					</view>
					<view class="action">
						<checkbox :class="item.checked?'checked':''" :checked="item.checked?true:false" :value="item.deviceSn"></checkbox>
					</view>
				</view>
			</view>
			</checkbox-group>
			<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
			<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
		<view class="cu-bar btn-group list-footer">
		    <button class="cu-btn bg-orange round" @click="btnSubmit()">分派已选择的设备</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:null,
				userName:null,
				
				tabListData:[],
				tabIndex:0,
				
				listData:[],
				keyword:'',
				pageNo:1,
				checkedValues:[],
				refreshLoad:false
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.userId = data.userId;
				_self.userName = data.userName;
			})
			this._loadBusiTypeListData();
		},
		onShow() {
			if(this.refreshLoad){
				this.refreshLoad = false;
				this.pageNo = 1;
				this.listData = [];
				this._loadListData();
			}
		},
		methods:{
			_loadBusiTypeListData:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.commBusinessTypeList,{
					removeBusinessTypes:['BXSCNShop']
				},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						_self.tabListData = res.body.items;
						_self.tabIndex = 0;
						_self._loadListData();
					}else if(res.code == 202){
						_self.tabListData = [];
						_self.tabIndex = 0;
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
					}
				})
			},
			_loadListData:function(){
				if(this.pageNo > 0){
					uni.showLoading({
						title:'加载中...'
					})
					let businessType = this.tabListData[this.tabIndex].businessType;
					const _self = this;
					const api = this.$request;
					api.post(api.url.deviceList,{
						trim:this.keyword,
						businessType:businessType,
						pageNo:this.pageNo
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = _self.pageNo + 1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			bindTabChange:function(index){
				this.tabIndex = index;
				this.pageNo = 1;
				this.listData = [];
				this._loadListData();
			},
			btnSearch:function(){
				this.pageNo=1;
				this.listData=[];
				this._loadListData();
			},
			btnCheckboxChange:function(e){
				console.log(e);
				var items = this.listData,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].deviceSn == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
				console.log(items);
				this.checkedValues = values;
				this.$forceUpdate();
			},
			btnSubmit:function(){
				if(!this.checkedValues || this.checkedValues.length == 0){
					uni.showModal({
						title:'温馨提示',
						content:'请选择要分派的设备',
						showCancel:false
					})
					return;
				}
				
				const _self = this;
				const api = this.$request;
				api.post(api.url.deviceDistr,{
					userId:this.userId,
					deviceSnList:this.checkedValues
				},res=>{
					console.log(res)
					if(res.code==200){
						uni.showModal({
							content:'分派成功',
							showCancel:false,
							complete:function(res){
								uni.navigateBack();
							}
						})
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:'操作失败',
							icon:'error'
						})
					}
				})
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				this._loadListData();
			}
		}
	}
</script>

<style>
.list-body scroll-view{height:95vh;}
.list-body .cu-card>.cu-item{position:relative;margin-bottom:0;}
.list-body .cu-card>.cu-item .title{line-height:50rpx;margin-top:15rpx;}
.list-body .cu-card>.cu-item .btn-info{position:absolute;top:0;right:0;border:0;font-size:42rpx;}
.list-body .cu-card>.cu-item .btn-info::after{border:0;}
.list-body .cu-card>.cu-item .content{font-size:26rpx;}
.list-body .cu-card>.cu-item .content view{padding-top:2rpx;padding-bottom:2rpx;}
.list-body .cu-card>.cu-item .content .tt{min-width:130rpx;display: inline-block;text-align:right;}
.list-footer{position:fixed;bottom:0;width:100vw;}
</style>
